<template>
  <div class="app-container">
    <div class="main-top">
      <div class="left">
        <div class="left-title">条件设置</div>
        <div class="conditionSet">
          <div v-if="setData.length">
            <div v-for="(item, index) in setData" :key="index" class="setItem">
              <el-tag
                class="condition-tags"
                :key="index"
                @click="selectedTag(index)"
                effect="plain"
              >
                {{ index + 1 }}.{{ item.name }}
                <i @click="setDl(index)" class="el-icon-circle-close"></i>
              </el-tag>
            </div>
          </div>
          <div v-else class="condElse">条件为空，请添加</div>
          <el-divider class="divider"></el-divider>
          <div class="settings">
            <div class="settings-left">
              <span @click="lengthInit()">添加条件</span>
              <el-divider direction="vertical"></el-divider>
              <span @click="setUp(tagIndex)" v-show="tagIndex != null"
                >修改</span
              >
            </div>
            <div class="settings-right">
              <el-radio-group v-model="rel">
                <el-radio label="and">&nbsp;满足所有条件的数据</el-radio>
                <el-radio label="or">&nbsp;满足任意条件的数据</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-button
          class="btn1"
          @click="search"
          type="danger"
          icon="el-icon-search"
          >搜索</el-button
        >

        <el-button
          class="btn"
          @click="resetCondition"
          type="primary"
          icon="el-icon-refresh-right"
          plain
          >重置</el-button
        >

        <el-button class="btn2" @click="autoClear" icon="el-icon-loading"
          >自动清洗</el-button
        >
        <el-button
          @click="ShowDiscount()"
          class="btn"
          v-show="val.dataType === 'C'"
          >数据去重</el-button
        >
      </div>
    </div>
    <!-- 数据呈现形式判断(schemaId) -->
    <div
      class="main-center"
      v-if="
        val.schemaId == 1 ||
        val.schemaId == 2 ||
        val.schemaId == 6 ||
        val.schemaId == 9
      "
    >
      <!-- <div class="main-center" v-if="headerMsg.length"> -->
      <el-row style="margin-bottom: 1rem" :gutter="24">
        <el-col>
          <el-card shadow="never" class="cz-card">
            <span
              style="
                display: inline-block;
                width: 100%;
                color: #999999;
                font-size: 12px;
                margin-bottom: 5px;
              "
              >操作</span
            >
            <el-row>
              <el-col :span="3"
                ><el-button
                  @click="ShowFiltration()"
                  class="col-1"
                  type="primary"
                  >列过滤</el-button
                ></el-col
              >
              <el-col :span="3"
                ><el-button @click="handleData()" class="col-2">
                  异常值处理</el-button
                ></el-col
              >
              <!-- <el-col :span="3"
                ><el-button @click="ShowDiscount()" class="col-2"
                  >数据去重</el-button
                ></el-col
              > -->
              <el-col :span="3"
                ><el-button @click="computedData()" class="col-2"
                  >计算列</el-button
                ></el-col
              >
              <el-col :span="3"
                ><el-button class="col-3" type="danger" @click="delRowList()"
                  >删除</el-button
                ></el-col
              >
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-card shadow="never" class="table-card">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ 'font-size': '17px' }"
          @selection-change="getAutoClearData"
          style="width: 100%; font-size: 17px"
        >
          <el-table-column type="selection" align="center" fixed>
          </el-table-column>
          <el-table-column
            :prop="item"
            :label="item"
            align="center"
            class="tableItem"
            min-width="150%"
            :fixed="item == 'id' ? true : false"
            v-for="(item, index) in headerMsg"
            :key="index"
          >
          </el-table-column>
          <el-table-column
            prop="handel"
            label="操作"
            fixed="right"
            width="200"
            align="center"
            style="18vw"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
                v-hasPermi="['system:role:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
                v-hasPermi="['system:role:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="main-center" v-else>
      <cardList
        :val="val"
        v-for="(item, index) in tableData"
        :key="index"
        :dtIdx="index"
        :table-data="item"
      ></cardList>
    </div>
    <!-- 条件设置弹窗 -->
    <el-dialog
      title="设置条件"
      :visible.sync="settingshow"
      width="580px"
      :before-close="handleClose"
      class="dialog-setting"
    >
      <div class="addBox" v-infinite-scroll="load">
        <div
          v-for="(item, index) in initialValue"
          :key="index"
          class="addBoxitem"
        >
          <div class="addBoxTitle">条件{{ index + 1 }}:</div>
          <div class="additem">
            <div class="addTitle">*选择字段名</div>
            <el-select
              v-model="item.field"
              placeholder="请选择"
              size="mini"
              style="width: 248px"
            >
              <el-option
                v-for="item in field"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="additem1">
            <div class="addTitle">*选择条件符</div>

            <el-checkbox-group size="mini" :max="1" v-model="item.symbo">
              <el-checkbox-button
                v-for="cd in conditional"
                :key="cd.value"
                :label="cd.label"
                >{{ cd.value }}</el-checkbox-button
              >
            </el-checkbox-group>
            <span class="careful">*仅可选择一项</span>
          </div>
          <div class="additem1">
            <div class="addTitle">*输入条件值</div>
            <el-input
              v-model="item.val"
              placeholder="请输入条件值"
              size="mini"
              style="width: 248px"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <span class="add-condition" @click="addCondition()">新增条件</span>
        <el-button
          @click="
            settingshow = false;
            initialValue = [];
          "
          class="cancel"
          >取 消</el-button
        >
        <el-button class="commit" type="primary" @click="additemFn()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 条件编辑弹窗 -->
    <el-dialog
      title="条件修改"
      :visible.sync="setingEdit"
      width="580px"
      :before-close="handleClose"
      class="dialog-setting"
    >
      <div class="additem">
        <div class="addTitle">*选择字段名</div>
        <el-select
          v-model="setingEditData.field"
          placeholder="请选择"
          size="mini"
          style="width: 248px"
        >
          <el-option
            v-for="item in field"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="additem1">
        <div class="addTitle">*选择条件符</div>
        <el-checkbox-group size="mini" :max="1" v-model="setingEditData.symbo">
          <el-checkbox-button
            v-for="cd in conditional"
            :key="cd.value"
            :label="cd.label"
            >{{ cd.value }}</el-checkbox-button
          >
        </el-checkbox-group>
        <span class="careful">*仅可选择一项</span>
      </div>
      <div class="additem1">
        <div class="addTitle">*选择条件值</div>
        <el-input
          v-model="setingEditData.val"
          placeholder="请输入"
          style="width: 248px"
          size="mini"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="setingEdit = false">取 消</el-button>
        <el-button class="commit" type="primary" @click="setingEditSure()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 表格清理编辑弹窗 -->
    <el-dialog
      title="编辑"
      :visible.sync="clearPopup"
      width="30%"
      :before-close="handleClose"
    >
      <el-row
        type="flex"
        align="middle"
        style="margin-bottom: 19px"
        v-for="(item, index) in headerMsg"
        :key="index"
      >
        <el-col v-if="item != 'id'" :span="6">
          <div>{{ item }}</div>
        </el-col>
        <el-col :span="12">
          <el-input
            v-if="item != 'id'"
            v-model="editData[item]"
            placeholder="请输入名称"
            size="small"
          ></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="clearPopup = false">取 消</el-button>
        <el-button class="commit" type="primary" @click="editSureFn()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      v-if="this.searchFlag === 0"
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page"
      :page-size="5"
      :page-sizes="[5, 10, 15, 20]"
      layout="sizes,prev, pager, next"
      :total="datatotal"
    >
    </el-pagination>
    <el-pagination
      v-else
      background
      @current-change="handleCurrentChangeSearch"
      @size-change="handleSizeChangeSearch"
      :current-page="page"
      :page-size="5"
      :page-sizes="[5, 10, 15, 20]"
      layout="sizes,prev, pager, next"
      :total="datatotal"
    >
    </el-pagination>
    <!-- 自动清洗弹窗 -->
    <el-dialog
      title="自动清洗"
      class="dialog-clear"
      :visible.sync="autoClearVisible"
      width="480px"
      append-to-body
      :before-close="handleClose"
    >
      <div class="automatic">
        <span>待清洗文件: </span>
        <div class="ipt">{{ val.tableName }}</div>
        <div class="careful">*清洗过程中不可进行其他操作</div>
      </div>
      <div class="automatic">
        <span>*插件类型: </span>
        <el-select
          v-model="autoClearData.dataState"
          placeholder="请选择"
          @change="logData()"
        >
          <el-option
            v-for="item in plugTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="automatic">
        <span>*插件名称: </span>
        <el-select
          v-model="autoClearData.id"
          placeholder="请选择"
          no-data-text="请先选择插件类型"
        >
          <el-option
            v-for="(item, index) in plugIds"
            :key="index"
            :label="item.PluginName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="autoClearVisible = false"
          >取 消</el-button
        >
        <el-button class="commit" type="primary" @click="autoSure()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 列过滤弹窗 -->
    <el-dialog
      title="列过滤"
      class="dialog-filter"
      :visible.sync="lieguolv"
      width="580px"
      append-to-body
    >
      <el-form label-width="80px">
        <el-form-item label="*过滤条件:">
          <el-radio-group size="mini" v-model="filterCondition">
            <el-radio-button
              v-for="(item, index) in conditions"
              :Key="index"
              :label="item"
              >{{ item }}</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="*发布字段:">
          <div class="cd-table2">
            <el-table
              :data="tableColumn"
              border
              @select="selectDbRow"
              :header-cell-style="{ 'font-size': '17px' }"
              style="width: 100%; font-size: 17px"
            >
              <el-table-column
                type="selection"
                align="center"
                fixed
                width="50"
              />
              <el-table-column
                label="字段名称"
                width="149"
                fixed
                align="center"
                prop="COLUMN_NAME"
              />
              <el-table-column
                label="类型"
                width="149"
                fixed
                align="center"
                prop="COLUMN_TYPE"
              />
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="lieguolv = false">取 消</el-button>
        <el-button
          class="commit"
          type="primary"
          @click="filterList"
          v-if="filterCondition === '过滤列'"
          >确 定</el-button
        >
        <el-button class="commit" type="primary" @click="saveList" v-else
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 异常值处理弹窗 -->
    <el-dialog
      title="异常值处理"
      class="dialog-handle"
      :visible.sync="yichangzhi"
      width="480px"
      append-to-body
    >
      <el-form label-width="105px">
        <el-form-item label="*数据列名称:">
          <el-select
            v-model="OutliersDataDetail"
            class="m-2"
            placeholder="请选择列名称"
            size="small"
          >
            <el-option
              v-for="(item, index) in tableColumnHeader"
              :key="index"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="*原始数据:">
          <el-input
            placeholder="请输入原始数据值"
            v-model="BefroeOutliersData"
          />
        </el-form-item>
        <el-form-item label="*修改值:">
          <el-input placeholder="请输入修改值" v-model="AfterOutliersData" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="yichangzhi = false">取 消</el-button>
        <el-button class="commit" type="primary" @click="handleOutliersData()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 数据去重弹窗 -->
    <el-dialog
      title="数据去重"
      class="dialog-quchong"
      :visible.sync="shujuquchong"
      width="580px"
      append-to-body
    >
      <el-form label-width="80px">
        <el-form-item label="*过滤条件:">
          <!-- <el-radio-group
            size="mini"
            v-for="item in distinctTable"
            :Key="item"
            @click="clickbtn(vals)"
            v-model="filterCondition"
          >
            <el-radio-button :label="item">{{ item }}</el-radio-button>
          </el-radio-group> -->

          <el-button @click="setingEditVid(1)" size="small" type="primary" plain
            >内部去重</el-button
          >
          <el-button @click="setingEditVid(2)" size="small" type="primary" plain
            >外部去重</el-button
          >
        </el-form-item>
        <el-form-item label="*发布字段:">
          <div class="cd-table2">
            <el-table
              :data="tableColumn"
              border
              @selection-change="selectDbRow"
              :header-cell-style="{ 'font-size': '17px' }"
              style="width: 100%; font-size: 17px"
            >
              <el-table-column
                type="selection"
                align="center"
                fixed
                width="50"
              />
              <el-table-column
                label="字段名称"
                width="149"
                fixed
                align="center"
                prop="COLUMN_NAME"
              />
              <el-table-column
                label="类型"
                width="149"
                fixed
                align="center"
                prop="COLUMN_TYPE"
              />
            </el-table>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="shujuquchong = false"
          >取 消</el-button
        >
        <el-button class="commit" type="primary" @click="updateDiscount"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 计算列弹窗 -->
    <el-dialog
      title="计算列"
      class="dialog-jisuan"
      :visible.sync="jisuanlie"
      width="980px"
      append-to-body
    >
      <div class="js-left">
        <el-form label-width="80px">
          <el-form-item label="*列名称:">
            <el-input placeholder="请输入列名称" v-model="columnsName" />
          </el-form-item>
          <el-form-item label="*字段类型:">
            <div v-if="FxData.id != undefined && countList != undefined">
              {{ FxData[FxData.id - 1].type }}
            </div>
          </el-form-item>
          <el-form-item label="*字段长度:">
            <el-input placeholder="请输入字段长度" v-model="columnsLong" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancel" @click="jisuanlie = false">取 消</el-button>
          <el-button class="commit" type="primary" @click="countColumn()"
            >确 定</el-button
          >
        </div>
      </div>
      <!-- <div class="js-center"></div> -->
      <div class="js-right">
        <el-row>
          <el-col :span="24">
            <div class="right-main">
              <div
                contenteditable="true"
                class="right-nr"
                v-if="FxData.id != undefined && countList != undefined"
              >
                = {{ FxData[FxData.id - 1].functionName }}({{ countList }})
              </div>
              <div contenteditable="true" class="right-nr" v-else>=</div>
              <!-- <div class="right-cz">
                <el-link type="primary">检查&nbsp;</el-link>
                <span>|</span>
                <el-link type="primary">清空</el-link>
              </div> -->
            </div>
          </el-col>
        </el-row>
        <el-row class="row-2">
          <el-col :span="8">
            <div>*字段列表:</div>
            <div class="countSelection">
              <el-select
                v-model="countList"
                class="m-2"
                placeholder="请选择修改字段"
                size="small"
                ><el-option
                  v-for="(item, index) in tableColumnHeader"
                  :key="index"
                  :value="item"
              /></el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div>*函数:</div>
            <div class="countSelection">
              <el-select
                v-model="FxData.id"
                placeholder="请选择使用函数"
                size="small"
              >
                <el-option
                  v-for="item in FxData"
                  :key="item.id"
                  :label="item.functionName"
                  :value="item.id"
              /></el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div>*函数说明:</div>
            <div
              class="function-description"
              v-if="this.FxData.id != undefined"
            >
              {{ FxData[FxData.id - 1].functionDescription }}
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="backIndex"
      width="480px"
      append-to-body
      class="del-dialog"
    >
      <div class="del-img"></div>
      <div class="del-msg">
        <div class="msg1">
          数据清洗中,暂时无法对该表进行操作,即将返回目录页，请等待状态变为清洗中，再返回该页面
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="commit" @click="backIndexStatus()" type="primary"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPlugInfo,
  getAutoClear,
  getTableList,
  getClearDel,
  getClearUp,
  getSetCondition,
  queryTableColumnInfo,
  getShowFiltration,
  getShowSaveFiltration,
  OutliersData,
  delColumnList,
  updateDb,
  FxDatil,
  ByFx,
  seekAllLabs,
  seekCasnoLabs,
  seekNameLabs,
  changeState,
  addColumns,
} from "@/api/burnPower/interface";
import { getDataSource, getPrimaryRs } from "@/api/scckocMeta/scckocMeta";

import cardList from "@/views/components/card-list/index.vue";

export default {
  name: "index",
  components: {
    cardList,
  },
  data() {
    return {
      //条件翻页区别
      saveSearchData: [],
      //翻页区别
      searchFlag: 0,
      //加载
      loading: true,
      //自动清洗返回页面
      backIndex: false,
      //模板
      labsParmas: {
        //模板中文名
        labsName: "",
        //模板CAS_NO
        labsNo: null,
      },
      //去重id
      vals: 1,
      // 版本号
      version: "3.6.0",
      tagIndex: null,
      input: "",
      SqlArr: [], //自动清洗sql插件
      JavaArr: [], //自动清洗Java插件
      autoClearData: {
        dataState: 1,
        id: null,
      },
      showHeader: false, //设置条件弹窗
      settingshow: false, //条件新增弹窗显示隐藏
      setingEdit: false, //条件编辑弹窗显示隐藏
      setingIndex: null, //修改条件下标
      clearPopup: false, //清理弹出显示隐藏
      lieguolv: false, //列过滤弹窗
      yichangzhi: false, //异常值处理弹窗
      shujuquchong: false, //数据去重弹窗
      jisuanlie: false, //计算列弹窗
      dataNaN: "0",
      radio: "1",
      val: [], //接收参数
      //字段类型
      dataType: ["Varchar", "Int", "Char", "Double", "Data"],
      ArrData: [], //转化数组
      selection: "", //列过滤勾选项
      setDataCon: [], //条件设置内容
      setData: [], //条件设置数据
      rel: "and", //查询条件关系 and or
      tableData: [], //底部列表数据
      datatotal: null, //底部数据总数
      field: [], //选择字段
      saveFlag: "", //保留或者过滤列判断
      tableColumn: [], // 表结构
      distinctTable: ["内部去重", "外部去重"], //去重方法
      OutliersDataDetail: [], //异常值处理下拉框
      BefroeOutliersData: null, //异常值原始数据
      AfterOutliersData: "", //异常值修改
      FxData: [], //函数数据
      countType: "", //列计算类型
      countList: "", //列计算列名
      columnsName: "", //列计算名称
      columnsLong: 255, //列字段长度
      conditional: [
        {
          value: "<",
          label: "<",
        },
        {
          value: ">",
          label: ">",
        },
        {
          value: "=",
          label: "=",
        },
        {
          value: "like",
          label: "like",
        },
      ], //条件符
      filterCondition: "保留列",
      conditions: ["保留列", "过滤列"],
      initialValue: [{ field: "", symbo: [], val: "" }], //点击添加初始值
      pageSize: 5,
      page: 1,
      //外部去重参数
      PrimaryRs: [],
      TreeLabs: [],
      //数据清理下拉框表头
      tableColumnHeader: [],
      manualData: [], //手动清洗数据
      editData: [], //编辑数据
      checkList: [], //条件复选框选中状态
      setingEditData: [{ field: "", symbo: [], val: "" }], //条件修改数据
      autoClearData: [], //自动清洗弹出对应数据
      dataSource: "", //接收的数据源
      autoClearVisible: false,
      // 自动清理数据
      autoClearData: {
        dataState: null,
        id: null,
      },
      //插件类型选择列表
      plugTypes: [
        {
          value: "1",
          label: "Sql",
        },
        {
          value: "0",
          label: "Java",
        },
      ],
      plugIds: [],
      headerMsg: [], //表头信息，
      showTable: false, //列表显示隐藏
      tableColumnHeaderBy: [],
    };
  },
  methods: {
    //自动过滤筛选
    logData() {
      console.log(this.autoClearData.dataState);
      this.autoClearData.id = null;
      this.SqlArr = [];
      this.JavaArr = [];
      if (this.autoClearData.dataState === "1") {
        getPlugInfo().then((res) => {
          this.plugIds = res.data;
          console.log(this.plugIds, "下拉分组");
          for (let i = 0; i < this.plugIds.length; i++) {
            if (this.plugIds[i].PluginName.includes("Sql") === true) {
              this.SqlArr.push(this.plugIds[i]);
            } else {
              this.JavaArr.push(this.plugIds[i]);
            }
          }
          this.plugIds = this.SqlArr;
        });
      } else if (this.autoClearData.dataState === "0") {
        getPlugInfo().then((res) => {
          this.plugIds = res.data;
          console.log(this.plugIds, "下拉分组");
          for (let i = 0; i < this.plugIds.length; i++) {
            if (this.plugIds[i].PluginName.includes("Sql") === true) {
              this.SqlArr.push(this.plugIds[i]);
            } else {
              this.JavaArr.push(this.plugIds[i]);
            }
          }
          console.log("sql", this.SqlArr, "java", this.JavaArr);
          this.plugIds = this.JavaArr;
        });
      } else {
        this.plugIds = [];
      }
    },
    // 获取数据源
    getDb() {
      getDataSource().then((res) => {
        this.dataSource = res.data;
        // console.log("111111",res);
      });
    },
    //列过滤获取表结构
    getTableCol(table) {
      queryTableColumnInfo(this.dataSource, table).then((res) => {
        this.tableColumn = res.data;
        console.log("列过滤获取表结构", this.tableColumn);
      });
    },
    //异常值处理下拉框
    handleData() {
      this.yichangzhi = true;
      this.tableColumnHeader = Object.keys(this.tableData[0]);
      let a = this.tableColumnHeader.indexOf("repeat_inside");
      console.log(a);
      this.tableColumnHeader.splice(a, 2);
      console.log(
        "3333333",
        this.tableColumnHeader,
        typeof this.tableColumnHeader
      );
    },
    //计算列函数
    computedData() {
      this.jisuanlie = true;
      this.tableColumnHeader = Object.keys(this.tableData[0]);
      let a = this.tableColumnHeader.indexOf("repeat_inside");
      console.log(a);
      this.tableColumnHeader.splice(a, 2);
      FxDatil().then((res) => {
        console.log("FxData", res.rows);
        let arr = res.rows;
        this.FxData = arr;
      });
    },
    //计算列执行
    countColumn() {
      let table = this.val.id;
      let columns = this.countList;
      let functionId = this.FxData.id;
      let functionName = this.FxData[functionId - 1].functionName;
      let newColumn = [
        this.columnsName,
        this.FxData[functionId - 1].type,
        this.columnsLong,
      ];
      newColumn = JSON.stringify(newColumn);
      let reg = new RegExp('"', "g");
      newColumn = newColumn.replace(reg, "");
      newColumn = newColumn.replace("[", "");
      newColumn = newColumn.replace("]", "");
      ByFx(table, columns, functionName, newColumn)
        .then(() => {
          this.$message.warning("函数方法执行中");
        })
        .then(() => {
          this.$message.success("执行成功");
          this.headerMsg = [];
          this.getClearData();
          this.jisuanlie = false;
        });
    },
    // 重置条件
    resetCondition() {
      this.checkList = [];
      this.setDataCon = [];
      this.setData = [];
      this.headerMsg = [];
      this.page = 1;
      this.searchFlag = 0;
      this.getClearData();
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    //选中条件
    selectedTag(index) {
      this.tagIndex = index;
    },

    //条件修改
    setUp(val) {
      this.setingIndex = val;

      this.setingEdit = true;
      this.setingEditData = { field: "", symbo: [], val: "" };
      console.log("setDataCon", this.setingEditData);

      this.setingEditData.symbo.push(this.setDataCon[val].symbo);
      this.setingEditData.field = this.setDataCon[val].field;
      this.setingEditData.val = this.setDataCon[val].val;

      // this.setingEditData = this.setDataCon[val];
      // this.setingEditData.symbo = ["like"];
      // this.setingEditData.symbo.push(this.setDataCon[val].symbo[0]);
      console.log(this.setDataCon[val], "setDataCon");
      console.log("setDataCon", this.setingEditData);

      this.$nextTick(() => {
        // this.setingEditData = this.setDataCon[val];
        this.$forceUpdate();
      });

      // console.log(this.conditional, "1111");
      // console.log(this.setingEditData, "setingEditData");
      // console.log(this.setingEditData.symbo, this.setDataCon[val]);
    },
    //条件修改确认
    setingEditSure() {
      this.setingEdit = false;
      this.setingEditData.symbo = this.setingEditData.symbo
        .toString()
        .replaceAll(",", "");
      this.setDataCon[this.setingIndex] = this.setingEditData;
      if (
        this.setingEditData.symbo === "" ||
        this.setingEditData.symbo === undefined ||
        this.setingEditData.symbo === null
      ) {
        this.$message.error("请勾选条件");
      } else {
        this.getval();
      }
    },
    //TODO: 顶部搜索按钮，这里接口500错误
    search() {
      this.headerMsg = [];
      let newArr = [];
      let flag = 0;
      this.searchFlag = 1;
      this.checkList.forEach((element, item) => {
        if (element == true) {
          flag += 1;
          newArr.push(this.setData[item].name);
          console.log(item, "item", this.setData);
        }
      });
      console.log("this.checkList", this.checkList);
      if (flag == 0) {
        this.getClearData();
        // this.$message.error('请选择搜索的条件');
      } else {
        getSetCondition(
          this.val.id,
          newArr,
          `${this.rel}`,
          this.page,
          this.pageSize
        ).then((res) => {
          this.tableData = res.data;
          this.datatotal = res.total;
          this.getheaderMsg();
        });
      }
      this.saveSearchData = this.setData;
      this.checkList = [];
      this.setDataCon = [];
      this.setData = [];
    },

    setingEditVid(res) {
      this.vals = res;
    },
    //数据去重
    ShowDiscount() {
      this.shujuquchong = true;
      this.selection = "";
      let table = this.val.tableName;
      this.getTableCol(table);
    },

    // 点击确定按钮时去重展示
    updateDiscount() {
      //获取tableid
      console.log("获取tableid", this.val.id);
      let table = this.val.id;
      // 获取处理字段
      console.log("获取处理字段selection", this.selection);

      //获取去重id
      let insideColumns = this.selection;
      let outsideColumns = this.selection;
      let id = this.val.schemaId;
      if (this.vals == 1) {
        console.log("调用了内部方法");
        let outsideColumns = null;
        let outsideTable = null;
        updateDb(table, insideColumns, outsideColumns, outsideTable).then(
          () => {
            this.shujuquchong = false;
            this.page = 1;
            this.headerMsg = [];
            this.getClearData();
            this.$message.success("内部去重成功");
          }
        );
      } else if (this.vals == 2) {
        console.log("调用了外部方法");
        let Table = this.PrimaryRs.find((item) => item.templateId == id);
        let outsideTable = Table.tableName;
        console.log("outsideTable", outsideTable);
        let insideColumns = null;
        updateDb(table, insideColumns, outsideColumns, outsideTable)
          .then(() => {
            this.shujuquchong = false;
            this.page = 1;
            this.headerMsg = [];
            this.getClearData();
            this.$message.success("外部去重成功");
          })
          .catch(() => {
            this.$message.error("不可勾选repeat_inside和repeat_outside字段");
            this.shujuquchong = false;
          });
      } else {
        let outsideColumns = null;
        let outsideTable = null;
        updateDb(table, insideColumns, outsideColumns, outsideTable)
          .then(() => {
            this.shujuquchong = false;
            this.page = 1;
            this.headerMsg = [];
            this.getClearData();
            this.$message.success("内部去重成功");
          })
          .then(() => {});
      }
    },

    //列过滤
    ShowFiltration() {
      this.lieguolv = true;
      this.selection = "";
      let table = this.val.tableName;
      this.getTableCol(table);
    },
    //列过滤勾选
    selectDbRow(select) {
      console.log("sfdasadasda", select);
      let strArrayList = [];
      for (let i = 0; i < select.length; i++) {
        strArrayList[i] = JSON.stringify(select[i].COLUMN_NAME);
      }
      let str = "";
      str = strArrayList.toString();
      let reg = new RegExp('"', "g");
      str = str.replace(reg, "");
      str = str.replace("[", "");
      str = str.replace("]", "");
      this.selection = str;
      console.log("selection", this.selection, typeof this.selection, str);
    },
    //保留列过滤
    filterList() {
      let table = this.val.id;
      let page = this.page;
      let size = this.pageSize;
      let columns = this.selection;
      let flag = "A";
      getShowFiltration(table, columns, page, size, flag)
        .then((res) => {
          this.tableData = res.data;
          console.log("beforeHeader");
          this.headerMsg = [];
          this.getheaderMsg();
          console.log("header", this.headerMsg);
          console.log("header", flag);
          console.log("res", res);
        })
        .then(() => {
          this.saveFlag = "";
          this.lieguolv = false;
        });
    },
    //执行列过滤
    saveList() {
      let table = this.val.id;
      let page = this.page;
      let size = this.pageSize;
      let columns = this.selection;

      getShowSaveFiltration(table, columns, page, size).then((res) => {
        this.tableData = res.data;
        console.log("beforeHeader");
        this.headerMsg = [];
        this.getheaderMsg();
        console.log("header", this.headerMsg);
        console.log("res", res);
      });

      this.lieguolv = false;
    },

    //异常值获取参数
    abnormalTdeal() {
      this.yichangzhi = true;
      let table = this.val.tableName;
      this.getTableCol(table);
      console.log("数组" + this.tableColumn);
      let getTableName = [];
      getTableName = this.tableColumn;
      console.log("数组" + getTableName);
    },
    //异常值处理
    handleOutliersData() {
      let table = this.val.id;
      let sel = this.OutliersDataDetail;
      let beData = this.BefroeOutliersData;
      let afData = this.AfterOutliersData;
      let columns = [sel, beData, afData];
      console.log("data:", table, sel, beData, afData, columns);
      columns = JSON.stringify(columns);
      let reg = new RegExp('"', "g");
      columns = columns.replace(reg, "");
      columns = columns.replace("[", "");
      columns = columns.replace("]", "");
      console.log(table, columns);
      OutliersData(table, columns)
        .then((res) => {
          if (res.status === 500) {
            this.$message.error(res.msg);
          }
          this.getClearData();
          this.$message.success("处理成功");
        })
        .then(() => {
          this.yichangzhi = false;
        });
    },

    addCondition() {
      this.initialValue.push({ field: "", symbo: [], val: "" });
    },
    getval() {
      for (let i = 0; i < this.setDataCon.length; i++) {
        if (this.setDataCon[i].symbo == "like") {
          this.setData[
            i
          ].name = `${this.setDataCon[i].field} ${this.setDataCon[i].symbo} '%${this.setDataCon[i].val}%'`;
          console.log("setData", this.setData[i].name, i, "I", this.setDataCon);
        } else {
          this.setData[
            i
          ].name = `${this.setDataCon[i].field} ${this.setDataCon[i].symbo} '${this.setDataCon[i].val}'`;
          console.log("setData", this.setData[i].name, i, "I", this.setDataCon);
        }
      }
    },
    setDl(val) {
      this.setData.splice(val, 1);
      this.setDataCon.splice(val, 1);
      this.checkList.splice(val, 1);
      this.tagIndex = null;
    },
    additemFn() {
      this.settingshow = false;
      this.saveSearchData = [];
      if (this.initialValue[0].symbo.length === 0) {
        console.log(this.initialValue[0], "2");
        this.$message.error("请选择查询条件");
      } else {
        this.initialValue.forEach((item) => {
          item.symbo = item.symbo.toString().replaceAll(",", "");
          item.symbo = item.symbo.replaceAll("=>", ">=");
          item.symbo = item.symbo.replaceAll("=<", "<=");
          item.symbo = item.symbo.replaceAll("><", "<>");

          this.setDataCon.push(item);

          this.setData.push({ name: "" });

          this.checkList.push(true);
        });

        this.getval();
        this.$nextTick(() => {
          // 给tags添加选中样式
          var tags = document.querySelectorAll(".condition-tags");
          // console.log("tags",tags);
          tags.forEach((item) => {
            let that = this;
            item.addEventListener("click", function () {
              console.log("this:", that);
              console.log(that.setingIndex, "index");
              tags.forEach((tag) => {
                tag.classList.remove("tag-active");
              });
              this.classList.add("tag-active");
            });
          });
        });
      }
      console.log(this.setData, "setData");
    },
    handleEdit(index, row) {
      this.editData = JSON.parse(JSON.stringify(row));
      // this.editData = JSON.stringify(row);
      this.getClearData();
      console.log("editData", this.editData);
      console.log("row", row);
      this.clearPopup = true;
    },
    editSureFn() {
      this.clearPopup = false;
      getClearUp(
        this.val.id,
        this.editData.id,
        JSON.stringify(this.editData)
      ).then((res) => {
        this.getClearData();
      });
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
      console.log(this.val.id, row.id);
      getClearDel(this.val.id, row.id).then((res) => {});
    },
    handleClose(done) {
      this.settingshow = false;
      this.setingEdit = false;
      this.clearPopup = false;
      this.autoClearVisible = false;
    },
    handleCurrentChange(parmas) {
      console.log("page", this.searchFlag);
      this.page = parmas;
      this.pageSize;
      this.getClearData();

      // this.filterList();
    },
    //每页数量调整
    handleSizeChange(val) {
      this.pageSize = val;
      this.getClearData();
    },
    //条件分页器
    handleCurrentChangeSearch(parmas) {
      console.log("page", this.searchFlag);
      this.page = parmas;
      this.pageSize;
      this.conditionSearch();

      // this.filterList();
    },
    //每页数量调整
    handleSizeChangeSearch(val) {
      console.log(val);
      this.pageSize = val;
      this.page = 1;
      this.conditionSearch();
    },
    // 底部分页带条件搜索
    conditionSearch() {
      this.headerMsg = [];
      let newArr = [];
      this.saveSearchData.length;
      for (let i = 0; i < this.saveSearchData.length; i++) {
        newArr.push(this.saveSearchData[i].name);
      }

      getSetCondition(
        this.val.id,
        newArr,
        `${this.rel}`,
        this.page,
        this.pageSize
      ).then((res) => {
        this.tableData = res.data;
        this.datatotal = res.total;
        this.getheaderMsg();
      });
    },
    load() {},
    //对象转化数组
    fmObjToArr(data) {
      let arr = [];
      for (let key in data) {
        arr.push({
          label: data[key], // label 字段
          value: key, // value字段
        });
      }
      console.log("3333333");
      return arr;
    },
    // 获取清洗工作台列表数据
    getClearData() {
      getTableList(this.val.id, this.page, this.pageSize).then((res) => {
        this.tableData = res.data;
        console.log("执行", this.tableData);
        this.datatotal = Number.parseInt(res.total);
        this.getheaderMsg();
      });
    },
    //组件查询
    handleQuery() {
      console.log(
        this.labsParmas.labsName,
        typeof this.labsParmas.labsNo,
        this.val.tableName
      );
      let cnName = this.labsParmas.labsName;
      let casno = this.labsParmas.labsNo;
      let tbName = this.val.tableName;
      let page = 1;
      let size = 10;
      if (this.labsParmas.labsName != "" && this.labsParmas.labsNo != null) {
        seekAllLabs(cnName, casno, tbName, page, size).then((res) => {
          this.tableData = res.data;
        });
      } else if (
        this.labsParmas.labsName != "" &&
        this.labsParmas.labsNo === null
      ) {
        seekNameLabs(cnName, tbName, page, size).then((res) => {
          this.tableData = res.data;
        });
      } else if (
        this.labsParmas.labsName === "" &&
        this.labsParmas.labsNo != null
      ) {
        seekCasnoLabs(casno, tbName, page, size).then((res) => {
          this.tableData = res.data;
        });
      } else {
        this.$message.error("请输入搜索参数");
      }
    },
    lengthInit() {
      this.settingshow = true;

      this.initialValue = [{ field: "", symbo: [], val: "" }];
    },
    //自动清理按钮
    autoClear() {
      this.autoClearVisible = true;
      // getPlugInfo().then((res) => {
      //   this.plugIds = res.data;
      //   console.log(this.plugIds, "下拉分组");
      //   for (let i = 0; i < this.plugIds.length; i++) {
      //     if (this.plugIds[i].PluginName.includes("Sql") === true) {
      //       this.SqlArr.push(this.plugIds[i]);
      //     } else {
      //       this.JavaArr.push(this.plugIds[i]);
      //     }
      //   }
      //   console.log("sql", this.SqlArr, "java", this.JavaArr);
      // });
    },
    backIndexStatus() {
      this.backIndex = false;
      let table = this.val.id;
      let dataState = 2;
      let flag = this.val.dataState;
      console.log(table);
      changeState(table, dataState, flag);
      this.val.dataState = dataState;
      this.$message.warning("方法执行中");
      this.$router.push({ path: "/clear/scckocMeta" });
      getAutoClear(
        this.val.id,
        Number.parseInt(this.autoClearData.id),
        Number.parseInt(this.autoClearData.dataState),
        Number.parseInt(0)
      )
        .then(() => {
          let table = this.val.id;
          let dataState = 1;
          let flag = this.val.dataState;
          console.log(table);
          changeState(table, dataState, flag);
          this.val.dataState = dataState;
        })
        .then(() => {
          this.$message.success("方法执行成功");
        })
        .catch(() => {
          let table = this.val.id;
          let dataState = 1;
          let flag = this.val.dataState;
          console.log(table);
          changeState(table, dataState, flag);
          this.val.dataState = dataState;
          this.$message.error("方法执行失败,请重试");
        });
      //   .then(() => {
      //     this.$message.warning("数据清洗中");
      //     this.$router.push({ path: "/clear/scckocMeta" });
      //   });
      // })
      // .then(() => {
      //   let table = this.val.id;
      //   let dataState = 1;
      //   let flag = this.val.dataState;
      //   console.log(table);
      //   changeState(table, dataState, flag).then(() => {
      //     this.$message.success("清洗成功");
      //   });
      // });
    },
    autoSure() {
      this.autoClearVisible = false;
      this.backIndex = true;
      // ).then((res) => {
      //   if (res.success) {
      //     this.$message.success(res.msg);
      //   } else {
      //     this.$message.error(res.msg);
      //   }
      // });
    },
    getAutoClearData(selection, row) {
      // this.autoClearData = JSON.parse(JSON.stringify(row));
      let arr = [];
      for (let i = 0; i < selection.length; i++) {
        arr[i] = selection[i].id;
      }
      arr = JSON.stringify(arr);
      let reg = new RegExp('"', "g");
      arr = arr.replace(reg, "");
      arr = arr.replace("[", "");
      arr = arr.replace("]", "");
      this.autoClearData = arr;

      console.log("autoClearData", this.autoClearData, arr);
    },
    //外部去重前置接口
    getPrimaryRss() {
      getPrimaryRs().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          this.PrimaryRs.push(res.data[i]);
        }
      });
    },
    //数据批量删除
    delRowList() {
      let tableName = Number(this.val.id);
      let id = Array.of(this.autoClearData);
      if (this.autoClearData.id === null || id[0] === "") {
        this.$message.error("请先勾选要删除的列");
      } else {
        delColumnList(tableName, id).then(() => {
          this.headerMsg = [];
          this.getClearData();
          this.$message.success("删除成功");
        });
      }
    },
    getheaderMsg() {
      if (this.headerMsg.length == 0) {
        for (const key in this.tableData[0]) {
          this.headerMsg.push(key);
        }
      }
      if (this.field.length == 0) {
        for (const key in this.tableData[0]) {
          this.field.push({
            value: key,
            label: key,
          });
        }
      }
    },
  },
  created() {
    this.val = JSON.parse(this.$route.query.val);
  },
  mounted() {
    this.getDb();
    console.log("1", this.tableData);
    this.getval();
    console.log("1", this.tableData);
    console.log("传下来转化的值", this.val);
    this.getClearData();
    console.log("1", this.tableData);
    this.getTableCol(this.val.tableName);
    console.log("1", this.tableData);
    this.getPrimaryRss();
  },
};
</script>

<style scoped lang="scss">
.countSelection {
  width: 180px;
  height: 31px;
}
.el-table .cell.el-tooltip {
  white-space: pre-wrap;
}
.main {
  border-radius: 1.25rem;
  box-sizing: border-box;
}
.main-top {
  padding: 0.875rem 24px 0 1rem;
  display: flex;
  flex: 1;
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  height: 14.25rem;
  background: #ffffff;
  border-radius: 0.5rem;
}
.left > div:first-child {
  color: #ccc;
  margin-bottom: 0.625rem;
}
.left {
  width: 69%;
  flex: 1;
}
.conditionSet {
  width: 100%;
  height: 10.375rem;
  padding: 1rem 0.875rem 0 0.875rem;
  border: 0.0625rem solid #eeeeee;
  border-radius: 0.375rem;
  box-sizing: border-box;
}
.conditionSet > div:first-child {
  display: inline-block;
  height: 7rem;
  width: 100%;
  overflow: auto;
}
.setItem {
  display: inline-block;
  height: 3.125rem;
  line-height: 3.125rem;
}
.setItem > span {
  margin-left: 1vw;
}
.setItemhand {
  height: 2.8125rem;
  width: 8vw;
  margin-top: -2.5rem;
  margin-left: 37vw;
}
.setItemhand > span {
  cursor: pointer;
}
.setItemhand > span:first-child {
  color: #337fff;
  margin-right: 2vw;
}
.setItemhand > span:last-child {
  color: #bd4541;
}
.settings {
  display: flex;
  justify-content: space-between;
  // width: 7.5rem;
  margin-top: 0.625rem;
  color: #337fff;
}
.settings > div {
  // flex: 1;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.settings > span {
  display: inline-block;
  width: 0.0625rem;
  height: 1.25rem;
  background-color: #337fff;
}
.settings > div:hover {
  // text-decoration: underline;
}
.settings > div:last-child {
  border-right: none;
}
.right {
  width: 36%;
  margin: 1.875rem 0 0 0;
}

.right span {
  font-size: 1rem;
  display: inline-block;
  width: 9.625rem;
  height: 2.875rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  text-align: center;
  line-height: 2.875rem;
  border-radius: 0.375rem;
}
.right span:hover {
  cursor: pointer;
}
.disabled {
  background-color: #337fff !important;
}
.right .btn1 {
  width: 9.625rem;
  height: 2.875rem;
  margin-left: 1.5rem;
  border-radius: 0.375rem;
}
.right .btn {
  width: 9.625rem;
  height: 2.875rem;
  margin-left: 1.5rem;
  margin-bottom: 1.6rem;
  border-radius: 0.375rem;
}

.right .btn2 {
  color: #bd4541;
  border: 1.3px ridge rgb(255, 119, 119);
  width: 9.625rem;
  height: 2.875rem;
  margin-left: 1.5rem;
  margin-bottom: 1.6rem;
  border-radius: 0.375rem;
}

.el-icon-search {
  margin-right: 0.375rem;
}
.el-icon-refresh-right {
  margin-right: 0.375rem;
}
.right span:nth-child(2) {
  border: 0.0625rem solid #cccccc;
  color: #333333;
}
.right span:last-child {
  display: block;
  border: 0.0625rem solid #bd4541;
  color: #bd4541;
}
.right-readio {
  border: 0.0625rem solid #ccc;
  height: 9.0625rem;
  margin: 2.5rem 0 0 0.9375rem;
  border-radius: 0.3125rem;
  padding: 1.875rem;
  box-sizing: border-box;
}

.table-card {
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  // height: 623px;
  background: #ffffff;
  border-radius: 8px;
}
.main-center {
  margin-top: 16px;
}
.tableHandle {
  display: inline-block;
  color: #337fff;
  margin: 0 1vw;
}
.tableHandle:hover {
  cursor: pointer;
  // text-decoration: underline;
}
.addBox {
  // height: 300px;
  overflow: auto;
}
.addBoxitem {
  margin-bottom: 10px;
}
.addBoxTitle {
  margin-bottom: 10px;
  font-size: 17px;
  font-family: PuHuiTi;
}
.additem,
.additem1 {
  display: flex;
  ::v-deep .el-select {
    width: 248px;
    height: 31px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
  }
  ::v-deep .el-input__inner {
    width: 248px;
    height: 31px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #eeeeee;
    padding: 6px 9px;
  }
  ::v-deep .el-checkbox-button {
    &__inner {
      margin-right: 16px;
      padding: 0;
      // border: 1px solid #EEEEEE;
      border-radius: 5px 5px 5px 5px;
      width: 31px;
      height: 31px;
      line-height: 31px;
    }
    &.is-checked .el-checkbox-button__inner {
      background-color: #bd4541;
      border-color: #bd4541;
    }
  }
}
.additem > div {
  margin-right: 20px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 8px;
}

.addTitle {
  width: 89px;
  color: #aaa !important;
}
.additem1 > div {
  margin-right: 20px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 8px;
}
.dialog-footer > span {
  display: inline-block;
  color: #337fff;
  position: absolute;
  left: 20px;
}
.dialog-footer > span:hover {
  cursor: pointer;
  // text-decoration: underline;
}
.pagination {
  margin-right: 24px;
}
.condElse {
  color: #999;
}
.left-title {
  font-size: 12px;
  //
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.automatic {
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  span {
    margin-right: 8px;
    width: 85px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    min-width: 80px;
    text-align: right;
  }
  ::v-deep .el-select {
    width: 168px;
    height: 31px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
  }
  ::v-deep .el-input__inner {
    width: 168px;
    height: 31px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #eeeeee;
    padding: 6px 9px;
  }
}

.dialog-clear {
  ::v-deep .el-dialog {
    border-radius: 10px;
    // height: 288px;
    top: 158px;
    &__body {
      padding-bottom: 0;
      padding-top: 0;
    }
    &__header {
      padding: 20px 30px 22px;
      .el-dialog__title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }
    }
  }
}

.dialog-setting {
  ::v-deep .el-dialog {
    border-radius: 10px;
    // height: 288px;
    top: 158px;
    &__body {
      padding-bottom: 0;
      padding-top: 0;
    }
    &__header {
      padding: 20px 30px 22px;
      .el-dialog__title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }
    }
  }
}

.ipt {
  display: inline-block;
  width: 130px;
  height: 31px;
  line-height: 31px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  padding-left: 8px;
}

.careful {
  font-size: 11px;
  font-weight: 400;
  color: #d6231d;
  line-height: 31px;
}
.add-condition {
  font-size: 14px;

  font-weight: 400;
  color: #2764ff;
}
.cancel {
  border: 0;
  height: 31px;
  font-size: 14px;

  font-weight: 400;
  color: #666666;
}
.commit {
  width: 128px;
  height: 31px;
  font-size: 14px;

  font-weight: 400;
  color: #ffffff;
  // line-height: 31px;
  background: #bd4541;
  border-radius: 4px;
  border: 0;
}
</style>

<style lang="scss">
.divider {
  color: #f0f0f0;
  margin: 0;
}
.condition-tags {
  display: inline-block;
  padding: 0 1.25rem;
  margin: 0.3125rem;
  /* width: 14rem; */
  height: 2rem;
  border-radius: 1.3125rem 1.3125rem 1.3125rem 1.3125rem;
  opacity: 1;
  border: 0.0625rem solid #cccccc;
  font-size: 0.875rem;
  font-weight: 400;
  color: #333333;
  line-height: 2rem;
  /* -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  i {
    margin-left: 0.625rem;
    position: relative;
    right: 0;
    color: #bd4541;
  }
}
.condition-tags:hover {
  cursor: pointer;
  // background: #BD4541;
  // color: #FFFFFF;
  // i {
  //   color: #FFFFFF;
  // }
}

.tag-active {
  background: #bd4541;
  color: #ffffff;
  i {
    color: #ffffff;
  }
}

.el-radio {
  //从这里开始 就是更改颜色的代码
  .el-radio__label {
    color: #999999 !important;
    margin-right: 1.0625rem;
  }
  &.is-checked {
    .el-radio__label {
      color: #333333 !important;
    }
  }
  .el-radio__input {
    margin-bottom: px(5);
    &.is-checked {
      .el-radio__inner {
        background: #bd4541;
        border-color: #bd4541;
      }
    }
    .el-radio__inner {
      &:hover {
        border-color: #bd4541;
      }
    }
  }
}
.settings-left {
  font-size: 0.875rem;
  font-weight: 400;
  color: #4353e4;
  line-height: 1rem;
}

.el-icon-circle-close {
  cursor: pointer;
}
.cz-card {
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  height: 6.25rem;
  background: #ffffff;
  border-radius: 0.5rem;
  .el-card__body {
    padding: 0.875rem 1rem 1.5625rem 1rem;
  }
}
.col-1 {
  width: 7.75rem;
  height: 2.5rem;
  background: #4353e4;
  border-radius: 0.3125rem;
  opacity: 1;
}
.col-2 {
  width: 7.75rem;
  height: 2.5rem;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 0.3125rem;
  opacity: 1;
}
.col-3 {
  width: 6.5rem;
  height: 2.5rem;
  background: #ffffff;
  border: 1px solid #bd4541;
  color: #bd4541;
  border-radius: 0.3125rem;
  opacity: 1;
}

.el-dialog {
  border-radius: 10px;
  &__body {
    padding: 10px 38px 10px 24px;
  }
  &__header {
    padding: 33px 38px 10px 24px;
  }
  &__footer {
    padding: 10px 38px 20px 24px;
  }
}
.cancel {
  border: 0;
  height: 31px;
  font-size: 14px;
  padding: 0 5px;
  font-weight: 400;
  color: #666666;
  margin-right: 6px;
}
.commit {
  width: 128px;
  height: 31px;
  font-size: 14px;
  padding: 0;
  font-weight: 400;
  color: #ffffff;
  // line-height: 31px;
  background: #bd4541;
  border-radius: 4px;
  border: 0;
}
.dialog-filter {
  .el-dialog {
    .el-radio-button__inner {
      margin-left: 10px;
      border-radius: 5px;
      border: 1px solid #eeeeee;
      width: 124px;
      height: 31px;
      font-size: 14px;
      font-family: PuHuiTi;
      font-weight: 400;
      color: #cccccc;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #bd4541;
      color: #ffffff;
      border: 0;
      box-shadow: 0 0 0 0 #bd4541;
    }
    .up-ziduan {
      width: 351px;
      height: 238px;
      margin-left: 10px;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid #eeeeee;
    }
  }
}
.dialog-handle {
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-input__inner {
    width: 168px;
    height: 31px;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #eeeeee;
    font-size: 14px;
    font-family: PuHuiTi;
    font-weight: 400;
    color: #cccccc;
  }
}
.dialog-quchong {
  .up-ziduan {
    width: 351px;
    height: 238px;
    margin-left: 10px;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    border: 1px solid #eeeeee;
  }
}
.dialog-jisuan {
  .el-dialog {
    height: 520px;
    &__body {
      display: flex;
    }
  }
  .js-left {
    width: 296px;
    height: 420px;
    position: relative;
    .el-input__inner {
      width: 180px;
      height: 31px;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      border: 1px solid #eeeeee;
      font-size: 14px;
      font-family: PuHuiTi;
      font-weight: 400;
      color: #cccccc;
    }
    .dataNaN {
      height: 100px;
      padding-top: 14px;
    }
    .dialog-footer {
      position: absolute;
      bottom: 0;
      right: 63px;
    }
  }
  .js-center {
    width: 0px;
    opacity: 1;
    margin-right: 15px;
    border-left: 1px solid #eeeeee;
  }
  .js-right {
    flex: 1;
    .right-main {
      padding: 16px;
      width: 572px;
      height: 160px;
      background: #f5f5f5;
      border-radius: 5px;
      font-size: 14px;
      font-family: PuHuiTi;
      font-weight: 400;
      color: #333333;
      .right-nr {
        height: 115px;
      }
      .right-cz {
        color: #4353e4;
        .el-link.el-link--primary {
          color: #4353e4;
        }
      }
    }
    .row-2 {
      margin-top: 23px;
      div {
        margin-bottom: 6px;
      }
      .function-description {
        padding: 14px 46px 73px 17px;
        width: 180px;
        height: 195px;
        border-radius: 5px;
        opacity: 1;
        border: 1px solid #eeeeee;
      }
    }
  }
}
.cd-table2 {
  width: 351px;
  height: 238px;
  overflow: auto;
}
.seekHead {
  min-width: 1152px;
  height: 4.8125rem;
  background: #ffffff;
  margin: 0 1.5rem 0.6875rem 0;
  padding: 1.25rem 0.9375rem;
  border-radius: 0.5rem;
}
.search-btn {
  padding: 0 1.25rem;
  width: 128px;
  height: 2rem;
  font-family: PuHuiTi;
  color: #ffffff;
  background: #bd4541;
  border-radius: 0.25rem;
}
.reset-btn {
  padding: 0 1.25rem;
  height: 2rem;
  width: 128px;
  font-family: PuHuiTi;
  font-size: 0.875rem;
  border: 1px solid #eeeeee;
  border-radius: 0.25rem;
}
.caoz {
  padding-left: 5px;
  width: 271px;
  float: right;
}
</style>
